<template>
  <div>
      <!-- 添加品牌按钮 -->
      <el-button type="primary" icon="el-icon-plus" style="margin-bottom:20px"
      @click="addShowTrademark">添加</el-button>
      <!-- 显示品牌列表的表格按钮 -->
       <el-table  :data="trademarkList" border stripe style="width: 100%">
            <el-table-column  type="index"  prop="date" label="序号"  width="80" align="center">
            </el-table-column>
            <el-table-column   prop="tmName"  label="品牌名称">
            </el-table-column>
            <el-table-column  prop="name"  label="品牌LOGO">
               <template slot-scope="scope">
                   <!-- scope是一个数据对象，里面有row和$index,row是这一行数据对象，index是索引 -->
                   <!-- <ing :src="scope.row.logoUrl" alt=""/> -->
                   <img :src="scope.row.logoUrl" alt="scope.row.tmName" style="width:100px;height:60px"/>
                </template>  
            </el-table-column>
            <el-table-column   label="操作">
                <template slot-scope="{row}">
                    <el-button  size="mini"  type="warning" icon="el-icon-edit"  @click="updateShowTrademark(row)">修改</el-button>
                    <el-button  size="mini"  type="danger" icon="el-icon-delete"  @click="deleteTrademark(row)">删除</el-button>
                </template> 
            </el-table-column>
        </el-table>
      <!-- 分页-->
      <!-- 
          page-sizes:展示的选择每页显示个数的选项 
      -->
        <div class="block" style="textAlign:center">
            <span class="demonstration"></span>
            <el-pagination  @size-change="handleSizeChange"  @current-change="getTrademarkList"
            :current-page="page"
            :page-sizes="[3, 6, 9, 12]"  
            :page-size="limit"
            layout=" prev, pager, next, jumper,->,sizes,total"
            :total="total">
            </el-pagination>
        </div>
       <!-- 对话框 -->
    <el-dialog :title="`${formData.id ?'修改':'添加'}品牌`" :visible.sync="dialogFormVisible">
    <el-form :model="formData" style="width:80%" :rules="rules" ref="formData" >
        <!-- 第一项内容 添加品牌 -->
        <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="tmName">
        <el-input v-model="formData.tmName" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 第二向内容品牌LOGO-->
        <el-form-item label="品牌LOGO" :label-width="formLabelWidth" prop="logoUrl">
            <el-upload
                class="avatar-uploader"
                action="/dev-api/admin/product/fileUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="formData.logoUrl" :src="formData.logoUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
            </el-upload>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTrademark">确 定</el-button>
    </div>
    </el-dialog>
      
  </div>
</template>

<script>
  export default {
      name:'Trademark',
      data(){
        return{
                page:1,//页码（将来是动态的）
                limit:3,//每页的条数(将来每页显示的条数也是动态的)
                trademarkList:[],//品牌列表数据
                total:0,//显示的总条数
                currentPage4: 4,// 
                // dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '100px',
                formData:{
                   tmName:'',//用来收集品牌的名字
                   logoUrl:''//用来收集品牌logoUrl的地址
                },
                rules: {
                  tmName: [
                    { required: true, message: '请输入品牌名称'},
                    { min: 2, max: 10, message: '内容长度在2到10个字符之间', trigger: 'change'  }
                  ],
                  logoUrl: [
                    { required: true, message: '请上传图片', trigger: 'change' }
                  ],
                  }
         }
      },
      //页面加载后的生命周期钩子
      mounted(){
        this.getTrademarkList();     
      },
     methods: {   
           //获得品牌列表数据,参数有默认值，
          //更新页码
        async getTrademarkList(page = 1){
            this.page = page
         const result =  await this.$API.trademark.getTrademarkList(this.page,this.limit)
          //判断
          if(result.code!==200){
              //输出错误信息
              this.message.console.error('获取品牌列表失败了');
              return
             
          }
          //此时请求时成功的解构出数据
          //结构数据
          const {records,total}=result.data
          //更新数据
          this.trademarkList = records
          this.total= total
        },
        //分页组件的相关方法
        handleSizeChange(limit) {
                this.limit = limit //改变每一页显示的条数
                this.getTrademarkList() //重新获取当前的列表数据
                // console.log(`每页 ${limit} 条`);
            },
            // handleCurrentChange(page) {
               // this.page = page
            //    this.getTrademarkList(page);//获取当前这一页的数据
            // }, 
        //点击添加按钮
        //坑===
        addShowTrademark(){
            //重新初始化数据
            this.formData={
                tmName:'',
                logoUrl:''
            },
         this.dialogFormVisible = true;
          //每次添加品牌窗口出现后之后，应该先清理之前的表单验证提示信息
          this.$nextTick(()=>{
              this.$refs.formData.clearValidate()
          })
        //  console.log(this.formData)
        },
        //点击修改按钮显示对话框
        updateShowTrademark(trademarkInfo) {
            //traddmarkInfo--->对象===引用变量（地址变量）---->存储了对象所在的空间的地址（变量中存储的是一个地址）
            //this.formData--->属性
            //this.formData = trademarkInfo----地址
            //this.formData--->地址,trademarkInfo---->地址  两个变量村存储的是同一个地址，指向的是 同一个内存空间；
            //其中一个变量所指的空间中的对象的属性值发生改变，那么另外一个对象的属性的值也会变化
            //要把修改的品牌对象数据信息保存起来
            //this.formData = this.trademarkInfo  // 这是不对的
            //让两个引用变量指向的是两个空间，只不过数据一样即可
            //修改
            this.formData = {...trademarkInfo}
            this.dialogFormVisible = true;
            console.log(this.formData)
        },
        //上传图片上传成功的回调函数
         handleAvatarSuccess(res, file) {
             //此时图片上传成功，立刻把对应的图片地址保存起来
            //  console.log(res)
            if(res.code==200){
              this.formData.logoUrl = res.data
              //如果图片上传成功了，那么应该清理掉之前表单验证的提示信息
              this.$refs.formData.clearValidate('logoUrl')
            }
      
      }, 
      //上传图片之前的回调
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        //限定图片上传格式
        const isJPG = ['image/jpeg','image/png'].includes(file.type);
        // console.log(file)
        //限制图片大小
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传品牌图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传品牌图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //添加或者修改品牌的操作
      addOrUpdateTrademark(){
         //点击确定按钮时需要表单验证
         this.$refs.formData.validate(async(valid)=>{
            if(valid){
                this.dialogTableVisible = false;
                //收集数据调用接口，判断接口调用是否成功，成功则刷新页面，失败则提示信息
            //发请求====添加品牌请求
            const result = await this.$API.trademark.addOrUpdate(this.formData)
            //判断是否成功，是添加成功还是修改成功？添加失败呢？还是修改失败呢----没必要判断这些东西
            //如果添加品牌成功，需要再次发送请求，获取品牌列表数据
            if(result.code!==200){
                this.$message.error('操作失败')
                return           
            
            }
            //成功了
            this.$message.success('操作成功')
            //如果修改操作则刷新但当前页面，如果添加操作则刷新第一页的数据
            this.getTrademarkList(this.formData.id ? this.page:1)
            //关闭对话框
            this.dialogFormVisible = false;
            }
        })         
      },
      //删除品牌操作
      deleteTrademark(trademarkInfo){
        //弹出删除对话框
        this.$confirm(`你确定是否删除${trademarkInfo.tmName}吗`,'删除品牌操作',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).then(async()=>{
            //调用删除接口
            await this.$API.trademark.deleteTrademarkById(trademarkInfo.id)
            //提示消息
            this.$message.success('删除成功')
            //刷新
            this.getTrademarkList(this.trademarkList.length===1 && this.page>1 ? this.page-1: this.page)
        }).catch((error)=>{
            if(error==='cancel'){
                this.$message.info('已取消删除')
                return
            }
            //肯定是报错了
             this.$message.info('操作失败',error)
        })

      }
    }
  }
</script>

<style >
   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>